<script setup>
import { ref } from 'vue'
import amap from '@/utils/amap-wx.130.js'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/index.js'
import { color } from '../../uni_modules/uview-plus'
import { date } from '../../uni_modules/uview-plus/libs/function/test'
import steps from '../../uni_modules/uview-plus/components/u-steps/steps'

const UserStore = useUserStore()

// 地图缩放视角
const scale = ref(14)
// 初始目的地经度
const longitude = ref(null)
// 初始目的地纬度
const latitude = ref(null)
// 用户所在经度
const userLongitude = ref(null)
// 用户所在纬度
const userLatitude = ref(null)
// 用户位置信息
const userLocation = ref(null)
// 目标地点位置信息
const location = ref(null)
// 标记点
const markers = ref([])
// 目的地名称
const name = ref(null)
// 目的地地址信息
const address = ref(null)
// 路线图数据
const polyline = ref([])
// 路线详情数据
const stepsDetail = ref([])
// 用户与目的地之间的距离
const distance = ref(null)
// 所需时间
const duration = ref(null)
// 打车需要的价格
const price = ref(null)

// 控制详情弹框是否显示
const isShow = ref(false)

// 控制底部弹出层是否弹出
const popupShow = ref(false)

// 初始化高德地图
const amapPlugin = ref(null)
const key = ref('3fcebec5948fab51dcbf82facb931883')

// 初始化高德地图
const initAmapMap = () => {
	amapPlugin.value = new amap.AMapWX({
		key: key.value
	})

	// 显示景点/酒店/餐厅的位置
	amapPlugin.value.getRegeo({
		location: location.value,
		success: (data) => {
			if (data) {
				address.value = data[0].regeocodeData.formatted_address
			}
		},
		fail: (err) => {
			console.log(err)
		}
	})

	// 标记点定位
	markers.value = [{ id: 1, width: 30, height: 45, latitude: latitude.value, longitude: longitude.value }]
}

// 获取到达目的地的路线
const getDestinationRoutes = (type) => {
	// 清空之前的数据
	distance.value = 0
	duration.value = 0
	price.value = 0
	stepsDetail.value = []
	polyline.value = []

	amapPlugin.value[`get${type}Route`]({
		origin: userLocation.value,
		destination: location.value,
		success: (data) => {
			const points = []

			if ((data.paths && data.paths[0] && data.paths[0].steps) || data.paths[0].rides) {
				let steps = []

				if (data.paths[0].rides) {
					steps = data.paths[0].rides
				} else {
					steps = data.paths[0].steps
				}

				for (let i = 0; i < steps.length; i++) {
					const poLen = steps[i].polyline.split(';')
					stepsDetail.value.push(steps[i].instruction)

					for (let j = 0; j < poLen.length; j++) {
						points.push({
							longitude: parseFloat(poLen[j].split(',')[0]),
							latitude: parseFloat(poLen[j].split(',')[1])
						})
					}
				}
			}

			// 路线轨迹
			polyline.value = [{ points: points, color: '#2ccd98', width: 8, arrowLine: true }]
			// 距离
			if (data.paths[0] && data.paths[0].distance) {
				distance.value = (data.paths[0].distance / 1000).toFixed(1) + '公里'
			}
			// 时间
			if (data.paths[0] && data.paths[0].duration) {
				let minutes = Math.floor(data.paths[0].duration / 60)
				let hours = Math.floor(minutes / 60)
				let remainMinutes = minutes % 60
				duration.value = hours ? hours + '小时' : '' + remainMinutes ? remainMinutes + '分钟' : ''
			}
			// 价格
			if (data.taxi_cost) {
				price.value = parseInt(data.taxi_cost) + '元'
			}

			// 添加路线信息到markers数组中
			markers.value = [
				{
					id: 2,
					width: 50,
					height: 50,
					latitude: userLatitude.value,
					longitude: userLongitude.value,
					iconPath: '/static/images/start.png'
				},
				{
					id: 3,
					width: 50,
					height: 50,
					latitude: latitude.value,
					longitude: longitude.value,
					iconPath: '/static/images/end.png'
				}
			]
		},
		fail: (err) => {
			console.log(err)
		}
	})

	// 重置地图视角
	scale.value = 8

	// 显示弹层
	isShow.value = true
}

// 点击跳转导航
const getToNavigation = () => {
	uni.openLocation({
		latitude: Number(latitude.value),
		longitude: Number(longitude.value),
		address: address.value,
		name: name.value,
		success: () => {
			console.log('success')
		},
		fail: (err) => {
			console.log(err)
		}
	})
}

// 点击定位按钮回到目的地位置
const resetLocation = () => {
	uni.createMapContext('map').moveToLocation({
		latitude: latitude.value,
		longitude: longitude.value
	})
	scale.value = 12
}

onLoad((option) => {
	// 记录经纬度位置
	if (option) {
		longitude.value = option.longitude
		latitude.value = option.latitude
		location.value = longitude.value + ',' + latitude.value
		name.value = option.name
	}

	// 初始化高德地图
	initAmapMap()

	// 确定用户所在位置
	if (UserStore.UserInfoList.latitude && UserStore.UserInfoList.longitude) {
		userLatitude.value = UserStore.UserInfoList.latitude
		userLongitude.value = UserStore.UserInfoList.longitude
		userLocation.value = userLongitude.value + ',' + userLatitude.value
	} else {
		amapPlugin.value.getRegeo({
			success: (data) => {
				userLatitude.value = data[0].latitude
				userLongitude.value = data[0].longitude
				userLocation.value = userLongitude.value + ',' + userLatitude.value
			},
			fail: (err) => {
				console.log(err)
			}
		})
	}
})
</script>

<template>
	<view class="container">
		<map
			id="map"
			:style="{ height: isShow ? '80vh' : '90vh' }"
			:polyline="polyline"
			:scale="scale"
			:longitude="longitude"
			:latitude="latitude"
			:show-location="true"
			:markers="markers"
		></map>

		<!-- 定位按钮 -->
		<view class="position" @tap="resetLocation" :style="{ bottom: isShow ? '350rpx' : '200rpx' }">
			<text class="iconfont icon-a-dingwei2"></text>
		</view>

		<!-- 导航详情 -->
		<view v-if="isShow" class="detail">
			<view class="content">
				<view class="left">
					<view class="distance" v-if="distance">全程{{ distance }}</view>
					<view class="duration" v-if="duration">时长预计{{ duration }}</view>
					<view class="price" v-if="price">打车预计{{ price }}起</view>
				</view>

				<view class="right" @tap="popupShow = true" v-if="stepsDetail.length > 0">
					路线详情
					<up-icon name="arrow-right"></up-icon>
				</view>
			</view>
		</view>

		<!-- 底部弹出层 -->
		<up-popup :show="popupShow" @close="popupShow = false" mode="bottom" :overlay="false" closeable>
			<view class="popup-content">
				<scroll-view scroll-y="true" style="height: 600rpx; padding: 40rpx 0" @tap="popupShow = false">
					<view class="popup-item" v-for="(item, index) in stepsDetail" :key="index">{{ item }}</view>
				</scroll-view>
			</view>
		</up-popup>

		<!-- 底部导航选项 -->
		<view class="map-bottom">
			<view class="method">
				<view class="drive" @tap="getDestinationRoutes('Driving')">
					<view class="icon">
						<text class="iconfont icon-jiache"></text>
					</view>
					驾车导航
				</view>

				<view class="foot" @tap="getDestinationRoutes('Walking')">
					<view class="icon">
						<text class="iconfont icon-buhang"></text>
					</view>
					步行导航
				</view>

				<view class="bike" @tap="getDestinationRoutes('Riding')">
					<view class="icon">
						<text class="iconfont icon-qihang"></text>
					</view>
					骑行导航
				</view>

				<view class="navigation" @tap="getToNavigation">
					<view class="icon">
						<text class="iconfont icon-daohangluxian"></text>
					</view>
					导航
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 80vh;

	#map {
		width: 100%;
		height: 100%;
	}

	.position {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 70rpx;
		height: 70rpx;
		right: 30rpx;
		border-radius: 50%;
		background-color: #fff;

		.iconfont {
			color: #3c506b;
			font-size: 50rpx;
		}
	}

	.detail {
		width: 100%;
		height: 10vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		font-size: 27rpx;

		.content {
			width: 90%;
			height: 80%;
			border-radius: 30rpx;
			background-color: #f8f9fd;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.right {
				display: flex;
				align-items: center;
			}
		}
	}

	.popup-content {
		height: 600rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;

		.popup-item {
			margin: 40rpx 0;
		}
	}

	.map-bottom {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: 10vh;
		padding: 20rpx;
		background-color: #fff;
		font-size: 25rpx;
		text-align: center;

		// 定义外层公共样式
		@mixin common-styles-out {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		// 定义内层公共样式
		@mixin common-styles-in {
			width: 85rpx;
			height: 85rpx;
			border-radius: 50%;
		}

		.method {
			display: flex;
			justify-content: space-around;

			.address {
				font-size: 30rpx;
			}

			.drive {
				@include common-styles-out;

				.icon {
					@include common-styles-in;
					@include common-styles-out;
					background-color: #fff2ea;
				}

				.iconfont {
					font-size: 50rpx;
					color: #fc6716;
				}
			}

			.foot {
				@include common-styles-out;

				.icon {
					@include common-styles-in;
					@include common-styles-out;
					background-color: #e9ecff;
				}

				.iconfont {
					font-size: 50rpx;
					color: #2c95d9;
				}
			}

			.bike {
				@include common-styles-out;

				.icon {
					@include common-styles-in;
					@include common-styles-out;
					background-color: #f2ebfd;
				}

				.iconfont {
					font-size: 50rpx;
					color: #8f51d8;
				}
			}

			.navigation {
				@include common-styles-out;

				.icon {
					@include common-styles-in;
					@include common-styles-out;
					background-color: #feebee;
				}

				.iconfont {
					font-size: 50rpx;
					color: #fc3749;
				}
			}
		}
	}
}
</style>
